import {Spin, Input, Checkbox, Form, Button, Col, Row, message} from "antd";
import {UserOutlined, LockOutlined, BulbOutlined} from "@ant-design/icons";
import React, {useState, useEffect} from "react";
import {DynamicRoutes} from "@/router/index";
import "./index.less";
import {login, validatecode} from "@/services/login";
import {SETSESSIONSTORE, SETCOOKIE} from "@/utils/cookies";
import {useContainer} from "unstated-next";
import Local from "@/store";

export default function Login(props: any) {
  const [spinning, setspinning] = useState(false);
  const [code, setcode] = useState("");
  const [key, setkey] = useState("");
  const {
    user: {setUserInfo},
    permissonStore: {setPermissionList},
  } = useContainer(Local);

  const timer: NodeJS.Timeout = setTimeout(() => {
    setspinning(false);
  }, 5000);

  const getimg = () => {
    validatecode({})
      .then((res) => {
        const {code, key} = res.data.data;
        setcode(code);
        setkey(key);
      })
      .catch((err) => {
        console.log("validatecode", err);
      });
  };

  useEffect(() => {
    getimg();
    return () => {
      clearTimeout(timer);
    };
  }, []);

  const onFinish = async (values: Views.Login) => {
    if (timer) {
      clearTimeout(timer);
    }
    setspinning(true);
    const {account, pwd, code} = values;
    login({account, pwd, key, code})
      .then((res) => {
        console.log("res", res);
        if (res.data.code == 200) {
          SETCOOKIE("token", res.data.data.token);
          SETSESSIONSTORE("useInfo", JSON.stringify(res.data.data));
          setUserInfo(res.data.data);
          setPermissionList(DynamicRoutes);
          props.history.push("/home");
        } else {
          message.error(res.data.message);
        }
        setspinning(false);
      })
      .catch((err) => {
        console.log("err", err);
        timer;
      });
  };

  const changeclick = () => {
    getimg();
  };

  return (
    <div className="Login">
      <div className="login_view">
        <Spin tip="加载中..." size="large" spinning={spinning}>
          <Form
            name="normal_login"
            className="login-form"
            initialValues={{
              remember: true,
            }}
            onFinish={onFinish}
          >
            <Form.Item
              name="account"
              rules={[
                {
                  required: true,
                  message: "请输入账号!",
                },
              ]}
            >
              <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="账号" />
            </Form.Item>
            <Form.Item
              name="pwd"
              rules={[
                {
                  required: true,
                  message: "请输入密码!",
                },
              ]}
            >
              <Input prefix={<LockOutlined className="site-form-item-icon" />} type="password" placeholder="密码" />
            </Form.Item>
            <Form.Item name="code" rules={[{required: true}]}>
              <Row>
                <Col span={8}>
                  <Input placeholder="验证码" prefix={<BulbOutlined />} />
                </Col>
                <Col span={10} offset={2}>
                  <img style={{width: "90%", height: "40px", marginTop: "-10px"}} src={code} onClick={changeclick}></img>
                </Col>
              </Row>
            </Form.Item>
            <Form.Item>
              <Form.Item name="remember" valuePropName="checked" noStyle>
                <Checkbox>记住密码</Checkbox>
              </Form.Item>

              <a className="login-form-forgot" href="">
                忘记密码
              </a>
            </Form.Item>

            <Form.Item wrapperCol={{span: 24}}>
              <Button type="primary" htmlType="submit" className="site-form-item-button">
                登录
              </Button>
            </Form.Item>
          </Form>
        </Spin>
      </div>
    </div>
  );
}
